<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>抖音大数据观测平台</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!-- 样式 -->
    <link rel="stylesheet" href="css/style.css">
    <style>
        /* 热点词云卡片控制区域样式 */
        .card-controls {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .select-control {
            padding: 5px 10px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 4px;
            background-color: rgba(0, 0, 0, 0.3);
            color: white;
            font-size: 14px;
            outline: none;
            cursor: pointer;
        }
        
        .select-control:hover {
            border-color: rgba(255, 255, 255, 0.5);
        }
        
        .select-control option {
            background-color: #1a1a1a;
            color: white;
        }
        
        .btn {
            padding: 5px 15px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 4px;
            background-color: rgba(0, 0, 0, 0.3);
            color: white;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .btn:hover {
            background-color: rgba(0, 0, 0, 0.5);
            border-color: rgba(255, 255, 255, 0.5);
        }
    </style>

    <!-- 脚本：先加载jQuery，再加载ECharts核心和地图，最后加载业务脚本 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/world.js"></script>
    <script src="js/china.js"></script>
    <script src="js/dashboard.js?v=1.1" defer></script>
    <script src="js/hotspot.js" defer></script>
    <script src="js/animation.js" defer></script>

</head>
<body>
<!-- 顶部导航 -->
<nav class="navbar">
    <div class="logo">
        <a href="index.html" class="home-link">🏠 抖音大数据观测平台</a>
    </div>
    <ul class="nav-menu">
        <li><a href="overview.html" class="active">实时概览</a></li>
        <li><a href="hotspot.html">热点趋势</a></li>
        <li><a href="user-data.html">用户数据</a></li>
    </ul>
    <div class="time-display" id="currentTime">00:00:00</div>
    <div id="fullscreenBtn" class="btn">全屏</div>
</nav>

<script>
    // 更新实时时间
    function updateTime() {
        const now = new Date();
        const hours = now.getHours().toString().padStart(2, '0');
        const minutes = now.getMinutes().toString().padStart(2, '0');
        const seconds = now.getSeconds().toString().padStart(2, '0');
        document.getElementById('currentTime').textContent = `${hours}:${minutes}:${seconds}`;
    }
    // 初始更新并设置定时器
    updateTime();
    setInterval(updateTime, 1000);
</script>

<!-- 主容器 -->
<main class="main-container">
    <!-- 实时指标栏 -->
    <section class="realtime-bar" id="overview">
        <div class="realtime-item">
            <div class="label">当前在线</div>
            <div class="value"><span>1,248,367</span><span class="unit">人</span></div>
        </div>
        <div class="realtime-item">
            <div class="label">今日视频增量</div>
            <div class="value"><span>283,900</span><span class="unit">条</span></div>
        </div>
        <div class="realtime-item">
            <div class="label">GMV（24h）</div>
            <div class="value">¥<span>38,652</span><span class="unit">万</span></div>
        </div>
        <div class="realtime-item">
            <div class="label">峰值地区</div>
            <div class="value">广东</div>
        </div>
    </section>

    <!-- 网格卡片 -->
    <section class="dashboard-grid">
        <!-- 世界地图和国家访问量统计 - 同一行 -->
        <div class="chart-row">
            <!-- 世界地图 -->
            <div class="card map-container two-thirds">
                <div class="card-header">
                    <div>
                        <div class="card-title">全球访问热力</div>
                        <div class="card-subtitle">过去 24 小时</div>
                    </div>
                </div>
                <div id="worldMap" class="chart-container"></div>
            </div>
            
            <!-- 国家访问量数据图表 -->
            <div class="card one-third">
                <div class="card-header">
                    <div>
                        <div class="card-title">国家访问量统计</div>
                        <div class="card-subtitle">过去 24 小时</div>
                    </div>
                </div>
                <div id="countryBarChart" class="chart-container"></div>
            </div>
        </div>
        
        <!-- 中国地图和省份分布 - 同一行 -->
        <div class="chart-row">
            <!-- 中国地图 -->
            <div class="card map-container two-thirds">
                <div class="card-header">
                    <div>
                        <div class="card-title">国内访问热力</div>
                        <div class="card-subtitle">过去 24 小时</div>
                    </div>
                </div>
                <div id="chinaMap" class="chart-container"></div>
            </div>
            
            <!-- 省份分布数据图表 -->
            <div class="card one-third">
                <div class="card-header">
                    <div>
                        <div class="card-title">国内省份分布</div>
                        <div class="card-subtitle">过去 24 小时</div>
                    </div>
                </div>
                <div id="provincePieChart" class="chart-container"></div>
            </div>
        </div>

        <!-- 实时热点词云（新增id="hotspot"） -->
        <div class="card" id="hotspot">
            <div class="card-header">
                <div class="card-title">实时热点词云</div>
                <div class="card-controls">
                    <select id="timeRangeSelect" class="select-control" title="选择热点数据时间范围">
                        <option value="1h">最近1小时</option>
                        <option value="6h">最近6小时</option>
                        <option value="24h">最近24小时</option>
                    </select>
                    <button class="btn" onclick="refreshHotspot()">刷新</button>
                </div>
            </div>
            <div class="hotspot-container" id="hotspotTags"></div>
        </div>

        <!-- 带货榜单（新增id="sales"） -->
        <div class="card" id="sales">
            <div class="card-header">
                <div class="card-title">带货榜 TOP5</div>
            </div>
            <table class="data-table">
                <thead>
                <tr>
                    <th>排名</th>
                    <th>主播</th>
                    <th>销售额</th>
                    <th>占比</th>
                </tr>
                </thead>
                <tbody id="salesTop5"></tbody>
            </table>
        </div>

        <!-- 用户画像（新增id="audience"） -->
        <div class="card" id="audience">
            <div class="card-header">
                <div class="card-title">用户年龄分布</div>
            </div>
            <div id="ageChart" class="chart-container"></div>
        </div>

        <!-- 实时订单滚动 -->
        <div class="card">
            <div class="card-header">
                <div class="card-title">最新成交</div>
            </div>
            <div class="data-stream" id="orderStream"></div>
        </div>

        <!-- 趋势折线 -->
        <div class="card">
            <div class="card-header">
                <div class="card-title">11 日 DAU 趋势</div>
            </div>
            <div id="trendLine" class="chart-container"></div>
        </div>
    </section>
</main>
</body>
</html>